<template>
	<view>
		<map :latitude="form.latitude" :longitude="form.longitude" @regionchange="handelsee" :markers="markers"
			:enable-building="true" :enable-poi="true" style="width: 750rpx; height: 500rpx;"> 
		</map>
		<view class="margin-sm">
			<uv-search v-model="keyward" @custom="searchmap"></uv-search>
		</view>
		<scroll-view :style="{height:height+'px'}" :scroll-y="true" class="">
			<view class="address-box">
				<view v-for="item in searchlist" :key="item.id" class="address-box_item" @click="setaddr(item)">
					<view class=" address-box_item_left">
						<uv-text :text="item.title" color="#333" margin="0 0 4px 0"></uv-text>
						<uv-text :text="item.address" :size="12" color="#999999"></uv-text>
					</view>
					<view class="address-box_item_right">
						<uv-icon v-if="item.id==selctaddr.id" name="checkmark" size="28" color="#3c9cff"></uv-icon>
					</view>
				</view>

			</view>
		</scroll-view>
		<view class="map-bootom">
			<view class="map-bootom_content">
				<uv-button text="确认店铺地址" :disabled="!selctaddr.id" type="primary" @click="backbus" shape="circle"></uv-button>
			</view>
		</view>
	</view>
</template>

<script>
	import QQMapWX from '@/common/qqmap-wx-jssdk.js'
	import config from '@/config.js'
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				form: {
					latitude: 36.701602, //纬度
					longitude: 121.231505, //经度 
				},
				selctaddr: {},
				searchlist: [],
				height: 0,
				keyward: '',
				page_index: 1,
				//每页显示多少条数据
				page_size: 10,
				markers: []

			};
		},
		onReady() {

			let systemInfo = uni.getSystemInfoSync()
			var w = systemInfo.windowWidth
			var h = systemInfo.windowHeight

			this.height = h - (500 * w / 750) - 110
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo
			})
		},
		onLoad(option) {
			this.qqmapsdk = new QQMapWX({
				key: config.qqmapkey
			})
			if (option.shopname!='null' && option.shopname!='' && option.shopname!=undefined) {
				this.keyward = option.shopname
			}
			this.form.latitude = this.userInfo.latitude
			this.form.longitude = this.userInfo.longitude
			this.searchmap()


		},
		methods: {
			backbus() {
				uni.$emit('selectaddr', this.selctaddr)
				uni.navigateBack()
			},
			setaddr(item) {
				this.selctaddr = item
				this.form.latitude = item.location.lat
				this.form.longitude = item.location.lng

				// 		longitude: arr.location.lng,
			},
			handelsee(e) {
				const { type, detail } = e
				// if(type=='end'){
				// this.form = detail.centerLocation
				// }
			},
			searchmap() {
				let that = this
				this.qqmapsdk.search({
					keyword: that.keyward ? that.keyward : '车',
					location: that.form,
					page_index: that.page_index,
					page_size: that.page_size,

					success: res => { 
						const { data } = res
						this.searchlist = data

						data.forEach(arr => {
							var mark = {
								id: this.markers.length + 1,
								qqmapid: arr.id,
								latitude: arr.location.lat,
								longitude: arr.location.lng,
								width: 20, //宽
								height: 20,
								lable:{
									content:arr.title
								} ,
								iconPath: '/static/icon_plat.png'

							}
							this.markers.push(mark)

						})

					},
					fail: (err) => {

						console.log(err)
					}
				})
			}

		}
	}
</script>

<style lang="scss">
	page{
		background: #fff !important;
	}
	.mapCenter {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.address-box {
		padding: 10px;

		&_item {
			display: flex;
			flex-direction: row;
			border-bottom: #ddd solid 1upx;
			padding:16upx 0;
			align-items: center;

			&_left {
				flex: 1;
			}

			&_right {
				width: 25px;
			}
		}
	}

	.map-bootom {
		width: 100%;
		height: 70px;
		background-color: #fff;
		position: fixed;
		bottom: 0;

		&_content {
			padding: 10px 10px 20px 10px;
		}




	}
</style>